<template>
  <div class="login">
      <div class="title">登录页</div>
      <div class="block">
      
          <input type="text" placeholder="输入手机号" v-model="phone">
      </div>
      <div class="block">
          <input type="password" placeholder="输入密码"  v-model="pass">
      </div>
      <div class="block">
          <input type="button" value="登录" @click="tologin">
      </div>
  </div>
</template>

<script setup>
import {user_login} from '../api/api'
import {ref,onMounted} from 'vue'
import { useRouter } from 'vue-router';
 var $router=useRouter()
  
     var list=ref([])
      var phone=ref('')
      var pass=ref('')
  
   
    var  tologin=()=>{
      user_login({phone:phone.value,pass:pass.value}).then((res)=>{
          console.log(res.data);
          if(res.data.code==200){
              window.localStorage.setItem('token',res.data.token)
              window.localStorage.setItem('userId',res.data.userinfo.id)
              window.localStorage.setItem('phone',res.data.userinfo.phone)
              alert(res.data.msg)
         toIndex()
          }else{
              alert(res.data.msg)
          }
         
      })
    }
 var toIndex=()=>{
    $router.push('/index/shangpin')

 }
   

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html{
  height: 500px;
  background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp7.itc.cn%2Fq_70%2Fimages03%2F20200809%2F81aca1eef7d64789903f6bdf6a78daf5.jpeg&refer=http%3A%2F%2Fp7.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673059875&t=231003750653465a7272f8615f58a2b2');
}
 *{
          margin: 0;
          padding: 0;
      }
    
      .title{
          line-height: 40px;
          text-align: center;
          margin: 50px 0;
      }
      .block{
          margin: 30px;
      }
      .block input{
          height: 40px;
          line-height: 40px;
          border: 1px solid #ccc;
          padding-left: 20px;
          border-radius: 5px;
          width: 100%;
          box-sizing: border-box;
      }
    
</style>
